<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>提交管理·编辑提交</title>
    <link rel="stylesheet" type="text/css" href="/static/css/page/edit.css">
</head>
<body>
<form action="" method="post" id="popups-window">
    <input type="hidden" name="id">
    <table>
        <tbody>
        <tr hidden="hidden">
            <td>
                <span class="label">题目</span>
            </td>
            <td>
                <label>
                    <select class="input topicId" name="topicId" required>
                        <option value="">-请选择题目-</option>
                    </select>
                </label>
            </td>
        </tr>
        <tr hidden="hidden">
            <td>
                <span class="label">学生</span>
            </td>
            <td>
                <label>
                    <select class="input studentId" name="studentId" required>
                        <option value="">-请选择学生-</option>
                    </select>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">标题</span>
            </td>
            <td>
                <label>
                    <input class="input title" name="title" type="text" minlength="1" maxlength="16"
                           autocomplete="off" placeholder="1~16位字符" required>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">状态</span>
            </td>
            <td>
                <label>
                    <select class="input fulfill" name="fulfill" required>
                        <option value="">-请选择状态-</option>
                        <option value="true">已完成</option>
                        <option value="false">未完成</option>
                    </select>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <span class="label">评语</span>
            </td>
            <td>
                <label>
                    <textarea class="input comment" name="comment" minlength="1" maxlength="256" autocomplete="off"
                              placeholder="1~256位字符" required></textarea>
                </label>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="button-box">
        <button class="button confirm" type="submit">确定</button>
        <button class="button cancel" type="submit">取消</button>
    </div>
</form>

<script type="application/javascript">
    $(function () {
        // 全局数据
        let tagData = {};

        // 页面元素
        let idEle = $('#popups-window > input[name="id"]');
        let topicIdEle = $('#popups-window select[name="topicId"]');
        let studentIdEle = $('#popups-window select[name="studentId"]');
        let titleEle = $('#popups-window input[name="title"]');
        let fulfillEle = $('#popups-window select[name="fulfill"]');
        let commentEle = $('#popups-window textarea[name="comment"]');

        // 初始执行操作
        loadId();
        loadTagData();

        // 获取ID
        function loadId() {
            // 获取前页传来的ID
            let id = window.sessionStorage.getItem('editId');

            // 设置到页面
            idEle.val(id);
        }

        // 加载目标数据
        function loadTagData() {
            // 获取数据
            $.ajax({
                url: `/api/student-submit/look/${idEle.val()}`,
                type: "GET",
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        tagData = res.data;
                        titleEle.val(tagData.title);
                        if (tagData.fulfill !== null)
                            fulfillEle.val(tagData.fulfill.toString());
                        commentEle.val(tagData.comment);

                        // 加载枚举数据
                        loadTopicList();
                        loadStudentList();
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 加载题目列表
        function loadTopicList() {
            // 获取数据
            $.ajax({
                url: '/api/topic/list',
                type: "GET",
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        topicIdEle.html('<option value="">-请选择题目-</option>');
                        if (res.data)
                            res.data.forEach((item, index) => {
                                topicIdEle.append($(`<option value="${item.id}">${item.title}</option>`));
                            });
                        topicIdEle.val(tagData.topicId);
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 加载学生列表
        function loadStudentList() {
            // 获取数据
            $.ajax({
                url: '/api/user/student-list',
                type: "GET",
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        studentIdEle.html('<option value="">-请选择学生-</option>');
                        if (res.data)
                            res.data.forEach((item, index) => {
                                studentIdEle.append($(`<option value="${item.id}">${item.userInfo.name}</option>`));
                            });
                        studentIdEle.val(tagData.studentId);
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });
        }

        // 监听关闭按钮
        $('#popups-window > .button-box > .button.cancel').click(function (e) {
            e.preventDefault();
            $('#popups-window').hide(300, 'swing', function () {
                window.location.reload();
            });
        });

        // 监听表单提交
        $('#popups-window').submit(function () {
            // 获取数据
            let id = idEle.val();
            let topicId = topicIdEle.val();
            let studentId = studentIdEle.val();
            let title = titleEle.val();
            let fulfill = fulfillEle.val();
            let comment = commentEle.val();

            // 数据提交
            $('#popups-window').html(`<h2 style="margin-left: 20px; margin-right: 20px;">数据提交中...</h2>`);
            $.ajax({
                url: '/api/student-submit/edit',
                type: "PUT",
                data: {
                    'id': id,
                    'topicId': topicId,
                    'studentId': studentId,
                    'title': title,
                    'fulfill': fulfill,
                    'comment': comment
                },
                success: function (res) {
                    if (res.code === 0) {  // 业务层面成功
                        $.message({
                                type: 'success', content: res.msg, onClose: function () {
                                    window.location.reload();
                                }
                            }
                        );
                    } else {
                        $.message({type: 'error', content: res.msg});
                    }
                }
            });

            return false;
        });
    });
</script>
</body>
</html>